<!DOCTYPE html>
<%@ page contentType="text/html;charset=UTF-8" language="java"  isELIgnored="false"
         pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<html>
<head>
    <%-- 引入JQ和Bootstrap --%>
    <link rel="stylesheet" href="http://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="http://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="http://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link href="css/style.css" rel="stylesheet">
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <link rel="icon" href="images/favicon.ico" type="images/x-ico" />

    <title>学生管理页面 - 首页</title>
    <script>
    $(function () {
        $("ul.pagination li.disabled a").click(function () {
            return false;
        });
    });
    $(function () {
        $("#loginOut").click(function () {
            var con = confirm("退出登录？");
            if (con === true){
                window.location.href = "/StuSystem_war_exploded/LogoutServlet"
            }
        })
    });
    </script>
</head>

<body>
<div id="app">
    <div class="searchResult" style="width: 600px;display: inline-block">
        <div class="listDIV" style="margin: 0">
            <table class="table table-striped table-bordered table-hover">
                <caption><h3 style="margin: 0;">学生列表 - 共${page.total}人</h3></caption>
                <thead>
                <tr class="success">
                    <th>学号</th>
                    <th>姓名</th>
                    <th>年龄</th>
                    <th>性别</th>
                    <th>编辑</th>
                    <th>删除</th>
                </tr>
                </thead>
                <tbody>
                <c:forEach items="${students}" var="s" varStatus="status">
                    <tr>
                        <td>${s.studentID}</td>
                        <td>${s.name}</td>
                        <td>${s.age}</td>
                        <td>${s.sex}</td>
                        <td><a href="EditServlet?id=${s.id}"><span class="glyphicon glyphicon-edit"></span></a></td>
                        <td><a href="DeleteServlet?id=${s.id}"><span class="glyphicon glyphicon-trash"></span></a></td>
                    </tr>
                </c:forEach>
                </tbody>
                <tfoot>
                <td colspan="6" style="background-color: white;">
                    <nav class="pageDIV">
                        <ul class="pagination">
                            <li <c:if test="${!page.hasPreviouse}">class="disabled"</c:if>>
                                <a href="?page.start=0">
                                    <span>«</span>
                                </a>
                            </li>
                            <li <c:if test="${!page.hasPreviouse}">class="disabled"</c:if>>
                                <a href="?page.start=${page.start-page.count}">
                                    <span>‹</span>
                                </a>
                            </li>
                            <c:forEach begin="0" end="${page.totalPage-1}" varStatus="status">
                                <c:if test="${status.count*page.count-page.start<=30 && status.count*page.count-page.start>=-10}">
                                    <li <c:if test="${status.index*page.count==page.start}">class="disabled"</c:if>>
                                        <a href="?page.start=${status.index*page.count}"
                                           <c:if test="${status.index*page.count==page.start}">class="current"</c:if>
                                        >${status.count}
                                        </a>
                                    </li>
                                </c:if>
                            </c:forEach>
                            <li <c:if test="${!page.hasNext}">class="disabled"</c:if>>
                                <a href="?page.start=${page.start+page.count}">
                                    <span>›</span>
                                </a>
                            </li>
                            <li <c:if test="${!page.hasNext}">class="disabled"</c:if>>
                                <a href="?page.start=${page.last}">
                                    <span>»</span>
                                </a>
                            </li>
                        </ul>
                    </nav>
                </td>
                </tfoot>
            </table>
        </div>
        <div class="panel panel-info" v-show="result.length != 0">
            <div class="panel-heading">
                <h3 class="panel-title">搜索结果</h3>
            </div>
            <div class="panel-body" style="padding: 0">
                <table class="table table-bordered table-hover">
                   <tbody id="content">
                    <tr v-for="item in result" :key="item.id">
                        <td style="width: 101px">{{item.studentID}}</td>
                        <td style="width: 122px;">{{item.name}}</td>
                        <td>{{item.age}}</td>
                        <td>{{item.sex}}</td>
                        <td><a :href="'/StuSystem_war_exploded/EditServlet?id=' + item.id ">
                            <span class="glyphicon glyphicon-edit"></span></a></td>
                        <td><a :href="'/StuSystem_war_exploded/DeleteServlet?id=' + item.id ">
                            <span class="glyphicon glyphicon-trash"></span></a></td>
                    </tr>
                   </tbody>
                </table>
            </div>
        </div>
    </div>

    <div style="display: inline-block;width: 300px;vertical-align: top;margin: 0 50px;">
        <div class="addDIV" style="margin: 40px 0;width: 300px;">
            <div style="height: 40px;text-align: left">
                <%
                    String username = (String)session.getAttribute("username");
                %>
                <h3 style="display: inline"><span class="label label-primary">当前用户：<%=username%></span></h3>
                <button class="btn btn-danger" id="loginOut" style="float: right;line-height: 1.25">退出</button>
            </div>
            <div class="panel panel-success">
                <div class="panel-heading">
                    <h3 class="panel-title">增加学生</h3>
                </div>
                <div class="panel-body">
                    <form method="post" action="AddServlet" role="form">
                        <table class="addTable">
                            <tr>
                                <td>学号：</td>
                                <td><input type="text" name="studentID" id="studentID" placeholder="请在这里输入学号" required></td>
                            </tr>
                            <tr>
                                <td>姓名：</td>
                                <td><input type="text" name="name" id="name" placeholder="请在这里输入名字" required></td>
                            </tr>
                            <tr>
                                <td>年龄：</td>
                                <td><input type="text" name="age" id="age" placeholder="请在这里输入年龄" required></td>
                            </tr>
                            <tr>
                                <td>性别：</td>
                                <td><input type="radio" class="radio radio-inline" name="radio" value="男" required> 男
                                    <input type="radio" class="radio radio-inline" name="radio" value="女" required> 女
                                </td>
                            </tr>
                            <tr class="submitTR">
                                <td colspan="2" align="center">
                                    <button type="submit" class="btn btn-success">提 交</button>
                                </td>
                            </tr>
                        </table>
                    </form>
                </div>
            </div>
        </div>
        <div class="searchDIV input-group">
            <input type="text" id="sbtn" v-model="content" @keyup.enter="search"
                   class="form-control" placeholder="输入姓名或学号"/>
            <span class="input-group-btn">
                <button class="btn btn-default" @click="search"><i class="glyphicon glyphicon-search"></i></button>
            </span>
        </div>
        <p v-if="seen" style="color: red;text-align: left;margin: 10px 0">暂无结果！</p>
    </div>
</div>
</body>
<script>
    new Vue({
        el: "#app",
        data: {
            content: "",
            result: [],
            seen: false
        },
        methods: {
            search: function () {
                if (this.content == "") return;
                var conType = null;
                if (!isNaN(this.content)) {//若是数字则为学号
                    conType = "sno";
                }else {
                    conType= "sname";
                }
                var _this = this;//保存this
                $.ajax({
                    url: '/StuSystem_war_exploded/SearchServlet',
                    data:{
                        content: this.content,
                        type: conType
                    },
                    type: "GET",
                    success: function (resp) {
                        console.log(resp);
                        console.log("发送成功！");
                        _this.result.splice(0,_this.result.length);//清空
                        if (resp.length == 0){
                            _this.seen = true;
                            return;
                        }else {
                            _this.seen = false;
                        }
                        for (var i=0; i<resp.length; i++){
                            _this.result.push(resp[i])
                        }
                    },
                    error: function(err){
                        console.log(err);
                        console.log("发送失败！");
                    }
                })
            }
        }
    })
</script>
</html>